<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<script type="text/javascript" src="http://api.amap.com/webapi/init?v=1.1"></script>

<style type="text/css">

		.map_tb {
			width: 60px;
			height: 67px;
			background-image: url('images/map/map_tb_middle.png');
		}
		
		.map_tb_img {
			width: 45px;
			height: 45px;
			margin: 6px 0px 0px 7px;
		}
</style>

	<%-- 地图区域 --%>
			
       <div id="map_container" style="width: 100%;height: 80%;float: left;border: 1px solid #CCCCCC;">
       </div>
	   <div id="map_pos_info">
						经度：<input type="text" name="mapX" id="mapX"/> &nbsp;&nbsp; 纬度：<input type="text" name="mapY" id="mapY"/><br />
						街道：<input type="text" name="mapAddr" id="mapAddr" size="40"/> <br/>
						描述：<input type="text" name="mapDesc" id="mapDesc" size="40"/> <br /> 	 
						地图提供商：<input type="text" name="mapProvider" id="mapProvider" value="amap"/> &nbsp;&nbsp; 地图类型：<input type="text" name="mapType" id="mapType" value="2"/>Type Of Article<br />
	   </div>


<%-- javascript 区域 --%>
<script type="text/javascript">

//
//---------------------------------------- 全局变量 ------------------------------------------------
//
    var partMapAreaMethod_selectArticleImplementation = function() { alert("partMapAreaMethod_selectArticleImplementation is not registered"); };
    var partMapAreaMethod_registerCallbackWhenArticleSelected = function() { alert("partMapAreaMethod_registerCallbackWhenArticleSelected is not registered"); };
    var partMapAreaMethod_registerGetArticleSearchScope = function() { alert("partMapAreaMethod_registerGetArticleSearchScope is not registered"); };

	<%
		String methodName_selectArticleImplementation = request.getParameter("methodName_selectArticleImplementation");
		String methodName_registerCallbackWhenArticleSelected = request.getParameter("methodName_registerCallbackWhenArticleSelected");
		String methodName_registerGetArticleSearchScope = request.getParameter("methodName_registerGetArticleSearchScope");
		
		if (methodName_selectArticleImplementation != null) {
	%>
			partMapAreaMethod_selectArticleImplementation = <%= methodName_selectArticleImplementation %>;
	<%
		}

		if (methodName_registerCallbackWhenArticleSelected != null) {
	%>
			partMapAreaMethod_registerCallbackWhenArticleSelected = <%= methodName_registerCallbackWhenArticleSelected %>;
	<%
		}
		
		if (methodName_registerGetArticleSearchScope != null) {
	%>
			partMapAreaMethod_registerGetArticleSearchScope = <%= methodName_registerGetArticleSearchScope %>;
	<%		
		}
	%>

	var partMapAreaVar_mapObj;
	var partMapAreaVar_meMarker;
	var partMapAreaVar_userPosition;

//
//---------------------------------------- 自动执行代码 ------------------------------------------------
//

	// 注册话题列表获取成功后的回调方法
	partMapAreaMethod_registerCallbackWhenArticleSelected(updateWhenArticleSelected);
	
	// 注册获取话题搜索位置范围的回调方法
	partMapAreaMethod_registerGetArticleSearchScope(getArticleSearchScope);
		
	$(document).ready(function() {
		initMapContainer();
	});
	
//
//---------------------------------------- 对外公开的函数 ------------------------------------------------
//

	function partMapAreaMethod_getCurrentUserPositionInfo() {
		var mapX = $('#mapX').val();
		var mapY = $('#mapY').val();
		var mapAddr = $('#mapAddr').val();
		var mapDesc = $('#mapDesc').val();
		var mapProvider = $('#mapProvider').val();
		var mapType = $('#mapType').val();

		// This Array is match [mapX, mapY, mapAddr, mapDesc, mapProvider, mapType]
		var posiInfoArray = [mapX, mapY, mapAddr, mapDesc, mapProvider, mapType];
		return posiInfoArray;
	}

//
//---------------------------------------- 私有函数 ------------------------------------------------
//

	//初始化地理位置选择框
	function initMapContainer() {
		// 默认用户初始位置
        var myDefPosX = 104.07125473;
        var myDefPosY = 30.65556037;
        partMapAreaVar_userPosition = new AMap.LngLat(myDefPosX, myDefPosY);
        // 用户图标
        var userIcon = "images/default/default_head_img.gif";
        
		
		// 创建地图实例  
        partMapAreaVar_mapObj = new AMap.Map("map_container", {
        	level: 16, //地图初始化时的视野级别
        	center: partMapAreaVar_userPosition, //地图初始化时的中心点经纬度坐标
        	zooms : [3,19], //地图视野级别范围，如：[3,19]，3 为最小级别，19 为最大级别
        	dragEnable : true, //定义地图是否可以拖拽
        	zoomEnable : true, //定义地图视野级别是否可以更改
        	keyboardEnable : true, //定义地图是否可以被键盘控制
        	jogEnable: true, //定义地图拖拽时是否支持缓动效果
        	continuousZoomEnable: true, //定义地图是否有连续缩放效果
        	doubleClickZoom : true, //定义地图是否可以双击放大
        	scrollWheel: true //定义地图是否支持鼠标滚轮缩放
        });
		// 加载工具条  
        partMapAreaVar_mapObj.plugin(["AMap.ToolBar","AMap.OverView,AMap.Scale"], function() {  
			tool = new AMap.ToolBar({
				direction: false, // 隐藏方向导航
				ruler: false, // 隐藏视野级别控制尺
				autoPosition: false, // 禁止自动定位
				offset: {x: -10, y: 3}
			});
			partMapAreaVar_mapObj.addControl(tool);
//				加载比例尺
			scale = new AMap.Scale();
			partMapAreaVar_mapObj.addControl(scale); 
		});
        
		partMapAreaVar_meMarker = new AMap.Marker({  
			id:"myLocation",  
			position:partMapAreaVar_userPosition,
			draggable: true, 
			content: $("<div class='map_tb'><img src='"+ userIcon +"' class='map_tb_img'/></div>").get(0),
			offset:{x:-30,y:-65}  //偏移量需要根据marker内容大小来设置。无偏移量的情况，是从marker内容（图片）的左上角原点算起。所以一般偏移量是marker内容的-width/2和-height
		});  	
		partMapAreaVar_mapObj.addOverlays(partMapAreaVar_meMarker);

		// marker实现拖拽
		partMapAreaVar_mapObj.bind(partMapAreaVar_meMarker,"dragstart",function(e){
			partMapAreaVar_userPosition = partMapAreaVar_meMarker.position;
		});
		
		partMapAreaVar_mapObj.bind(partMapAreaVar_meMarker,"dragend",function(e){
			if(confirm("去这里逛逛？")) {
				userWalkOnMap(partMapAreaVar_meMarker, e.lnglat, partMapAreaVar_mapObj);
			}
			else
			{
				partMapAreaVar_meMarker.setPosition(partMapAreaVar_userPosition);
			}
		});

		
		// 绑定鼠标事件
		partMapAreaVar_mapObj.bind(partMapAreaVar_mapObj,"click",function(e){  
	        userWalkOnMap(partMapAreaVar_meMarker, e.lnglat, partMapAreaVar_mapObj);
		});

		// 绑定地图范围变化事件
		partMapAreaVar_mapObj.bind(partMapAreaVar_mapObj, "zoomchange", function(e){
			partMapAreaMethod_selectArticleImplementation(); // 获取话题列表
		});
		
		userWalkOnMap(partMapAreaVar_meMarker, partMapAreaVar_userPosition, partMapAreaVar_mapObj);
	}

    function userWalkOnMap(meMarker, lnglatXY, mapObj) {
		getPositionInfo(lnglatXY);
    	meMarker.setPosition(lnglatXY);
		mapObj.setCenter(lnglatXY); // 设置地图中心点坐标
		partMapAreaMethod_selectArticleImplementation(); // 获取话题列表
    }

	function getPositionInfo(lnglatXY) {
		// 查询用户位置信息
		var geo = new AMap.Geocoder({ 
			range:100,//范围 
			crossnum:1,//道路交叉口数 
			roadnum :1,//路线记录数 
			poinum:1//POI点数 
		}); 
		geo.regeocode(lnglatXY,function(data){  
	        var resultStr="";  
	        if(data.status =="E0") {  
	            for(var i=0;i<data.list.length;i++){
	                resultStr += data.list[i].province.name+data.list[i].city.name+data.list[i].district.name; 
                    for(var j=0;j<data.list[i].roadlist.length;j++){  
                        resultStr+= data.list[i].roadlist[j].name;  
                    }  
	            }  
	        } else if(data.status =="E1") {  
	             resultStr = "未查找到任何结果!";     
	        } else {  
	             resultStr= "错误信息："+data.state;  
	        }  
	        $('#mapAddr').val(resultStr);
	        $('#mapDesc').val(resultStr);
	    });         
        $('#mapX').val(lnglatXY.lng);
        $('#mapY').val(lnglatXY.lat);
	}

	// 获取文章搜索的位置范围
	function getArticleSearchScope() {

		var boundary = partMapAreaVar_mapObj.getBounds();
		// 返回四个值 minX, maxX, minY, maxY
		var scope = new Array(boundary.southwest.lng, boundary.northeast.lng, boundary.southwest.lat, boundary.northeast.lat);
		// alert("Search position scope is: " + scope[0] + "-" + scope[1] + ":" + scope[2] + "-" + scope[3]);
		return scope;
	}

	function updateWhenArticleSelected(dataSet) {
		var articleList = '';
		$.each(dataSet.list, function(i, obj) {
			articleList += 
			'<div class="indexArticleForMapPointItemDiv">'+
				'<div class="indexArticleForMapPointItemHeadImgDiv">'+
					'<img alt="" width="100%" height="100%" src="images/default/default_head_img.gif">'+
				'</div>'+
				'<div class="indexArticleForMapPointItemEachDiv">'+
					'<div style="width: 100%;height: 25px;line-height: 25px;text-align: left;border-bottom: 1px dashed #CCCCCC;">'+
						''+obj.articleTitle+''+
					'</div>'+
					'<div style="width: 100%;height: 25px;line-height: 25px;text-align: left;">'+
						'<a href="#none">查看详情</a>'+
					'</div>'+
				'</div>'+
			'</div>';
			var marker = new AMap.Marker({  
				id:obj.articleId,  
				position: new AMap.LngLat(obj.mapX, obj.mapY),  
			    icon:"http://api.amap.com/webapi/static/Images/marker_sprite.png",
				offset:{x:-8,y:-34}  
			});  
			partMapAreaVar_mapObj.addOverlays(marker);
		}); 
        
        $('#indexArticleListForMapPointDiv').html(articleList);
	}
	
</script>